<template>
    <div id="IndexAnchor">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <form action="/">
            <van-search
                    v-model="value"
                    shape="round"
                    placeholder="请输入站点搜索"
                    input-align="center"
                    @search="onSearch"
                    @cancel="onCancel"
            />
        </form>
        <div v-if="isSearch">
            <div class="Hot_cities">
                <div>热门</div>
                <template v-for="item in HotCities">
                    <van-button @click="btnHot(item.id,item.type,item.name)" style="height: 33px;line-height: 33px;margin: 8px 16px 0 0">{{item.name}}</van-button>
                </template>
            </div>
            <van-index-bar highlight-color="#0fa1a0" :index-list="indexList">
                <div v-for="item in city_list">
                    <van-index-anchor :index="item.title" />
                    <div v-for="items in item.lists">
                        <van-cell v-if="items.type === 'city'" @click="btnCell(items.sid,items.cid,items.type,items.name)" :title="items.name" />
                    </div>
                </div>
            </van-index-bar>
        </div>
        <div class="searchF" v-if="!isSearch">
            <template v-for="list in searchList">
                <div class="search" @click="btnCell(list.sid,list.cid,list.type,list.name)">
                    {{list.name}}
                </div>
            </template>
        </div>
        <Loading :isLoading="isLoading"/>
    </div>
</template>

<script>
    import NavBarTitle from 'components/NavBarTitle.vue'
    import Loading from 'components/Loading.vue'
    import { search , site , all} from '@/api/home'
    let city  = require('../../utils/area');
    export default {
        data() {
            return {
                NavBarTitle: '选择站点',
                city_list: [],
                value: '',
                indexList: [],
                HotCities: ['北京','成都','重庆','内江','泸州','达州','安岳','盐城',],
                isLoading: true,
                select: '',
                isSearch: true,
                searchList: []
            }
        },
        components: {
            NavBarTitle,
            Loading
        },
        watch:{
            value(){
                if(!this.value){
                    this.isSearch = true;
                }
            }
        },
        methods: {
            btnHot(id,type,name){
                let sitInfo = id+ "," + type + "," + name;
                if(this.select == 'Departure'){
                    sessionStorage.setItem('Departure',sitInfo);
                    if(sessionStorage.getItem('Departure')){
                        this.$router.replace('/home');
                    }

                }else if(this.select == 'arrive'){
                    sessionStorage.setItem('arrive',sitInfo);
                    if(sessionStorage.getItem('arrive')){
                        this.$router.replace('/home');
                    }
                }else {
                    this.$toast.fail('选择出错')
                }
                // this.$router.replace('/home');
            },
            btnCell(sid,cid,type,name){
                console.log(sid);
                let sitInfo
                if(type == 'city'){
                    sitInfo = cid+ "," + type + "," + name;
                }else if(type == 'site'){
                    sitInfo = sid+ "," + type + "," + name;
                }
                if(this.select == 'Departure'){
                    sessionStorage.setItem('Departure',sitInfo);
                    if(sessionStorage.getItem('Departure')){
                        this.$router.replace('/home');
                    }

                }else if(this.select == 'arrive'){
                    sessionStorage.setItem('arrive',sitInfo);
                    if(sessionStorage.getItem('arrive')){
                        this.$router.replace('/home');
                    }
                }else {
                    this.$toast.fail('选择出错')
                }

            },
            onSearch(val){
                // this.$toast(val);
                let data = {
                    token: this.$store.state.token,
                    key: val
                };
                search(data)
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            if(!res.data.data.city.length && !res.data.data.first.length){
                                this.$toast('暂无站点或城市信息')
                            }else {
                                this.searchList = res.data.data.city[0].lists;
                                this.isSearch = false
                            }
                        }else {
                            this.$toast(res.data.msg)
                        }
                    }).catch((err) => {
                    console.log(err);
                })
            },
            onCancel(){
                this.$toast('取消')
            },
            getSite(){
                let data = {
                    token: this.$store.state.token
                };
                site(data)
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            this.HotCities = res.data.data.hot;
                        }else {
                            this.$toast(res.data.msg)
                        }
                    }).catch((err) => {
                    console.log(err);
                });
            },
            getAll(){
                let data = {
                    token: this.$store.state.token
                };
                all(data)
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            this.city_list = res.data.data.city;
                            this.indexList = res.data.data.first;
                            this.isLoading = false
                        }else {
                            this.$toast(res.data.msg)
                        }
                    }).catch((err) => {
                    console.log(err);
                })
            }
        },
        beforeMount() {
            this.city_list = city.default.city;
        },
        created(){
            if(this.$route.query){
                this.select = this.$route.query.select
            }
            this.getSite()
            this.getAll()
        }
    }
</script>

<style scoped>
    /deep/.van-index-anchor--sticky{
        top: 46px;
    }
    .Hot_cities{
        font-size: 15px;
        color: #999999;
        padding: 34px 34px 0 12px;
    }
    /deep/.van-index-bar__index{
        padding: 0.105rem 0.10667rem 0 0.42667rem;
    }
    .btn{
        width: 68px;
        height: 33px;
    }
    .searchF{
        width: 100%;
        background-color: #ffffff;
        height: auto;
    }
    .search{
        padding: 12px 18px;
        font-size: 13px;
        color: #333333;
        border-bottom: 1px solid #eaeaea;
    }
</style>